<template>
  <Card :dis-hover="true" :padding="0" :bordered="false" class="content-left">
    <div class="demo-split">
      <Split v-model="split1">
        <div slot="left" class="demo-split-pane">
          <Tabs value="name1">
            <TabPane label="所有车辆" name="name1">
              <CarTreeList></CarTreeList>
            </TabPane>
            <TabPane label="搜索车辆" name="name2">
              <div>
                <Input search enter-button="Search" placeholder="输入车牌号" />
                <div style="height:10px"></div>
                <Input search enter-button="Search" placeholder="输入车标号" />
              </div>
            </TabPane>
          </Tabs>
        </div>
        <div slot="right" class="demo-split-pane">
              <div class="demo-split-left">
            <Split v-model="split2" mode="vertical">
              <div slot="top" class="demo-split-pane-top">
                <BMap :showTraffic="showTraffic" :isTrackPlayback="true"></BMap>
              </div>
              <div slot="bottom" class="demo-split-pane-bottom">
                <Tabs value="name2">
                  <TabPane label="监控列表" name="name2">
                    <MonitorList />
                  </TabPane>
                  <TabPane label="指令信息" name="name3">指令信息</TabPane>
                  <TabPane label="图片信息" name="name4">图片信息</TabPane>
                  <TabPane label="取证照片" name="name5">取证照片</TabPane>
                  <TabPane label="服务器查询" name="name6">服务器查询</TabPane>
                </Tabs>
              </div>
            </Split>
              </div>
        </div>
      </Split>
    </div>
    <Row type="flex">
      <!-- <i-col span="4" order="1">
        <div class="action-warp">&lt;</div>
        <div class="content-left">
          <Tabs value="name1">
            <TabPane label="所有车辆" name="name1">
              <CarTreeList></CarTreeList>
            </TabPane>
            <TabPane label="搜索车辆" name="name2">
              <div>
                <Input search enter-button="Search" placeholder="输入车牌号" />
                <div style="height:10px"></div>
                <Input search enter-button="Search" placeholder="输入车标号" />
              </div>
            </TabPane>
          </Tabs>
        </div>
      </i-col>-->
      <!-- <i-col span="20" order="2"> -->
      <!-- <ButtonGroup>
                <Button>地图清理</Button>
                <Button type="primary">控件显隐</Button>
                <Button>全屏显示</Button>
                <Button>测距</Button>
                <Button>车标颜色说明</Button>
                <Button @click="trafficToggle">路况:{{showTraffic?"开":"关"}}</Button>
                <Button type="primary" @click="vioceToggle">声音开关:{{switch1?"开":"关"}}</Button>
                <Button type="error" ghost>实时警情</Button>
      </ButtonGroup>-->
      <!-- <div class="diliver" /> -->
      <!-- <BMap :showTraffic="showTraffic" :isTrackPlayback="true"></BMap> -->
      <!-- <Row type="flex" justify="end" class="code-row-bg">
                  <i-col>

                        <Button type="primary" @click='vioceToggle'>声音开关：{{switch1?"开":"关"}} </Button>
                        <Button type="error" ghost>实时警情</Button>
                  </i-col>
      </Row>-->
      <!-- <Tabs value="name2">
          <TabPane label="监控列表" name="name2">
            <MonitorList />
          </TabPane>
          <TabPane label="指令信息" name="name3">指令信息</TabPane>
          <TabPane label="图片信息" name="name4">图片信息</TabPane>
          <TabPane label="取证照片" name="name5">取证照片</TabPane>
          <TabPane label="服务器查询" name="name6">服务器查询</TabPane>
      </Tabs>-->
      <!-- </i-col> -->
    </Row>
  </Card>
</template>

<script>
import BMap from "@/components/BMap.vue";
import CarTreeList from "@/components/CarTreeList.vue";
import MonitorList from "@/components/MonitorList.vue";
export default {
  components: {
    BMap,
    CarTreeList,
    MonitorList
  },
  data() {
    return {
      showTraffic: true,
      split1: 0.167,
      split2: 0.7,
    };
  },
};
</script>

<style>
.action-warp {
  background-color: #2d8cf0;
  width: 16px;
  height: 60px;
  color: white;
  line-height: 60px;
  text-align: center;
  position: relative;
  float: left;
  left: 100%;
  top: 30%;
  border-radius: 0 9px 9px 0;
  z-index: 100;
}
.content-left {
  min-height: 600px;
}
.demo-split {
  height: 600px;

}
.demo-split-left {
  height: 700px;

}
.demo-split-pane-top{
  max-height: 600px;
}
.demo-split-pane {
}
.demo-split-pane-bottom{
  background-color: white;
  min-height: 400px;

}
</style>